import React from 'react'
import { NavBar,Button, Field, Form,Toast } from 'react-vant'
import {useNavigate} from 'react-router-dom'
function  Login() {

  const [form] = Form.useForm();
  const navigate=useNavigate();
  const onFinish = (values) => {
    console.log(values);
    if(values.username == 'admain' && values.password == '123456' ){
      Toast.success('登录成功')
      window.localStorage.setItem('tokens',JSON.stringify(values));
      navigate(-1)
    }else{
      Toast.fail('账号或密码错误')
    }
  };

  return (
    <div>
      <NavBar title={'登录页面'} onClickLeft={()=>{ navigate(-1) }}/>
      <Form
      form={form}
      showValidateMessage={false}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType="submit" type="primary" block>
            提交
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
        }}
        intro="确保这是唯一的用户名"
        rules={[{ required: true, message: '请填写用户名' }]}
        name="username"
        label="用户名"
      >
        <Field placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item rules={[{ required: true, message: '请填写密码' }]} name="password" label="密码">
        <Field placeholder="请输入密码" />
      </Form.Item>
    </Form>
    </div>
  )
}

export default Login